<template>
	<div class="box">
		<div class="registry">
			<h1 style="color: white;margin-bottom: 2rem;">焦作师专新闻系统注册</h1>
			<div>
				<el-row style="margin-bottom: 2rem;">
					<el-input v-model="user.userName" placeholder="请输入账号" :prefix-icon="User" />
				</el-row>
				<el-row style="margin-bottom: 2rem;">
					<el-input v-model="user.fullName" placeholder="请输入姓名" :prefix-icon="User" />
				</el-row>
				<el-row style="margin-bottom: 2rem;">
					<el-input v-model="user.password" show-password placeholder="请输入密码" :prefix-icon="Lock" />
				</el-row>
				<el-row style="margin-bottom: 2rem;">
					<el-input v-model="repassword" show-password placeholder="再次输入密码" :prefix-icon="Lock" />
				</el-row>
			</div>
			<div>
				<el-button @click="registry()">注册</el-button>
				<el-button>取消</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	//引入图标
	import {
		User,
		Lock
	} from '@element-plus/icons-vue'
	//引入axios
	import axios from 'axios'
	//配置基本路径
	axios.defaults.baseURL = '/api'
	//引入store
	import {
		store
	} from '../../store.js'
	//引入消息框
	import {
		ElMessage
	} from 'element-plus'

	export default {
		data() {
			return {
				//绑定表单数据
				user: {
					userName: '',
					password: '',
					fullName: ''
				},
				repassword: '',
				store
			}
		},
		setup() {
			return {
				//初始化图标
				User,
				Lock
			}
		},
		methods: {
			registry() {
				if (this.repassword != this.user.password) {
					ElMessage.error('两次密码不一致！')
				} else {
					//调用后台接口实现注册
					axios.post('/user', this.user)
						.then(response => {
							//console.log(response)
							if (response.data) {
								ElMessage.success('恭喜，注册成功！')
								//注册成功，去登录
								this.$router.push('/login')
							} else {
								ElMessage.error('服务器异常，请稍后再试！')
							}
						})
				}

			}
		}
	}
</script>

<style>
	.box {
		height: 100%;
		background-color: #034f8a;
		position: relative;
	}

	.registry {
		width: 15%;
		text-align: center;
		position: absolute;
		top: 25%;
		left: 60%;
	}
</style>